<template>
	<view>
		<uni-section title="基础信息" type="line" style="color: #409EFF;"></uni-section>
		<uni-list style="width:95%">
			<uni-list-item title="工作日期" :rightText="listData.workList.workDate" />
			<uni-list-item title="所属项目" :rightText="project.name" />
			<uni-list-item title="工作主题" :rightText="listData.workList.name" />
			<uni-list-item title="工作人员" />
			<view class="tag-box">
				<uni-tag v-for="(item,index) in listData.employees"
				:key="index"
				:inverted="true" 
				:text="item.nickName" 
				type="default" 
				style="margin-left: 15rpx;" />
			</view>
			<uni-list-item title="备注" :note="listData.workList.note == '' ? '无': listData.workList.note" />
		</uni-list>		
		<uni-section title="加班出差" type="line"></uni-section>
		<uni-list style="width:95%">
			<uni-list-item title="加班信息" 
			:note="listData.workList.workStatus == 'EXTWORK' ? listData.workList.extWorkStart + '至' + listData.workList.extWorkEnd : '未加班' " 
			:rightText="'共' + listData.workList.extWorkHours + '小时' " />
			<uni-list-item title="出差信息" 
			:note="listData.workList.workStatus == 'ERRAND' ? '出差': '无'"
			:rightText="listData.workList.errandPlace == '' ? '' : '地点:' + listData.workList.errandPlace" />
		</uni-list>
		<uni-section title="费用支出" type="line"></uni-section>
		<uni-list style="width:95%">
			<uni-list-item title="费用合计" :rightText="'共¥' + listData.workList.cost + '元' " />
			<uni-collapse ref="collapse" style="margin-left: 20rpx;font-size: 28rpx; ">
				<uni-collapse-item title="费用列表" style="margin-left: 20rpx;">
					<uni-list-item :title="item.nameList[0]" v-for="(item,index) in listData.costLists"
					:key="index"
					:note="item.nameList[0] +'->'+ item.nameList[1]" 
					:rightText="'¥' +  item.cost + '元'" />
				</uni-collapse-item>
			</uni-collapse>
		</uni-list>
		<uni-section title="图片" type="line"></uni-section>
		<uni-list style="width:95%;margin-bottom: 50rpx;" >
			<uni-list-item title="现场照片" :rightText="'共' + listData.imageList.length + '张'" />
				<uni-file-picker id="img-box" v-if="listData.imageList.length > 0"
				title="照片最多显示9张" 
				v-model="listData.imageList"
				:image-styles="imgStyle"
				return-type="array"
				:del-icon="false"
				:disabled="true"
				mode="grid"
				></uni-file-picker>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				allWorkers: [],
				worker: [],
				costList: [],
				project: {
					id: '',
					name: ''
				},
				images: [],
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				}
			}
		},
		onLoad(ev) {
			//console.log(ev);
			this.getProject(ev.projectId);
			this.getWorkDetail(ev.id);
		},
		onShow() {
			
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			getProject(id) {
				var token = this.$dry.getToken();
				var data = this.$request.run("getProjectById", token);
				uni.request({
					url: data.url,
					method: data.method,
					header: data.header,
					data: {
						"projectId": id
					},
					success: data => {
						this.project.id = data.data.id;
						this.project.name = data.data.name;
					}
				})
			},
			getWorkDetail(id) {
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("getWorkListById",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"workListId": id
						},
				    	success: data => {
							this.listData = data.data;
							var newItems = [];
							var arr = this.listData.employees;
							for(var i = 0;i < arr.length;i++){
								newItems.push({
									id: arr[i].id,
									name: arr[i].nickName
								})
							}
							this.worker = newItems;
						}
					})
				}
			},
			
			getNumberOfDays(date1,date2){//获得天数
			    //date1：开始日期，date2结束日期
			    var a1 = Date.parse(new Date(date1));
			    var a2 = Date.parse(new Date(date2));
			    var day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
			    return day
			},
			getNumberOfHours(date1,date2){//获得小时数
			    //date1：开始日期，date2结束日期
			    var a1 = Date.parse(new Date(date1));
			    var a2 = Date.parse(new Date(date2));
			    var hour = parseInt((a2-a1)/ (1000 * 60 * 60));//核心：时间戳相减，然后除以小时数
			    return hour
			}
		}
	}
</script>

<style scoped>
	
	.content {
		padding-left: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
	}
	.content-box-text {
		font-size: 24rpx;
		line-height: 44rpx;
	}
	.tag-box {
		display: flexbox;
		margin-left: 20rpx;
	}
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
	.image {
		width: 200rpx;
		height: 150rpx;
	}
	#img-box {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}
</style>
